<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
		<title>剩余年假工具</title>
		<link crossorigin="anonymous" integrity="sha384-SkgH0ywfC/GONG2LxvaLuVuYjQqVrU/xL+FAW2Wv5zzfRZ8bmp/Na5dO3T0Zuzdh"
		 href="https://lib.baomitu.com/weui/1.1.3/style/weui.min.css" rel="stylesheet" />
		<link href="https://lib.baomitu.com/jquery-weui/1.2.0/css/jquery-weui.min.css" rel="stylesheet" />
		<script src="https://lib.baomitu.com/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://lib.baomitu.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
		<script src="https://lib.baomitu.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
		<style>
			body {
				overflow: auto;
			}
			
			.my-form .weui-cell__bd {
				display: flex;
			}
			
			.my-form.weui-cells.weui-cells_form {
				font-size: 15px;
				margin-top: 0;
			}
			
			.my-form .weui-cell__bd label {
				padding: 0 5px;
				min-width: 45px;
			}
			
			.my-tips {
				font-size: 12px;
			}
			
			.my-tips p:first-child {
				font-size: 14px;
				color: #444;
				font-weight: 600;
			}
			
			.my-item {
				padding: 15px 10px;
			}
			
			.my-item .weui-btn {
				line-height: 35px;
				font-size: 15px;
				border-radius: 3px;
			}
			
			.subjoin-box {
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: #fff;
				z-index: 5;
				overflow: auto;
			}
			
			.my-form .weui-cell__hd>p {
				font-size: 12px;
				color: #666;
				width: 105px;
				text-align: left;
			}
			
			.my-form .weui-cell__hd>p:first-child {
				font-size: 13px;
				color: #000;
			}
			
			.my-form .weui-label{
				width: 120px;
			}
			
			.weui-dialog__bd p {
				font-size: 14px;
				text-align: start;
				padding: 8px 0;
			}
			
			.my-right-input {
				text-align: right;
				padding-right: 5px;
			}
		</style>
	</head>

	<body>
		<div style="font-weight:600;text-align: center;font-size: 17px;padding: 8px 0;">当年剩余年假计算器</div>
		<div class="weui-cells weui-cells_form my-form">
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">工作已满</label></div>
				<div class="weui-cell__bd">
					<input id="txtWorkDay" class="weui-input" type="number" placeholder="工作已满">
					<label>年</label>
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">入职日期</label></div>
				<div class="weui-cell__bd">
					<input id="txtHiredate" class="weui-input" type="text" placeholder="入职日期">
					<label onclick="openTip('温馨提示','注：入职时间为选填项，未填写入职时间，将默认按照当年1月1日开始计算')">(选填)</label>
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">全年应享受天数</label></div>
				<div class="weui-cell__bd">
					<input id="txtFurlough" class="weui-input" type="number" placeholder="全年应享受天数">
					<label>天</label>
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">当年已休天数</label></div>
				<div class="weui-cell__bd">
					<input id="txtVacation" class="weui-input" placeholder="当年已休天数"><label>天</label>
				</div>
			</div>
		</div>
		<div class="weui-flex">

			<div class="weui-flex__item my-item">
				<a href="javascript:void(0);" onclick="reset()" class="weui-btn weui-btn_primary" style="background: #ff8369;">重置</a>
			</div>
			<div class="weui-flex__item my-item">
				<a href="javascript:void(0);" onclick="submit()" class="weui-btn weui-btn_primary" style="background: #01aaee;">计算</a>
			</div>
		</div>
		<div class="weui-cells weui-cells_form my-form">
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">当年剩余年假</label></div>
				<div class="weui-cell__bd">
					<input id="txtSurplus" class="weui-input my-right-input" type="number" disabled="disabled" placeholder="截止到当日"><label>天</label>
				</div>
			</div>
		</div>
		<script>
			$(function() {
				$("#txtHiredate").calendar();
				$('#txtWorkDay').change(function() {
					var furlough = Number($('#txtWorkDay').val());
					if (furlough < 0) {
						return;
					}
					if (furlough < 10) {
						$('#txtFurlough').val(5)
					} else if (furlough < 20) {
						$('#txtFurlough').val(10)
					} else if (furlough >= 20) {
						$('#txtFurlough').val(15)
					}
				})

			})

			function reset() {
				$("#txtHiredate").val("");
				$("#txtWorkDay").val("");
				$("#txtFurlough").val("");
				$("#txtVacation").val("");
				$("#txtSurplus").val("");

			}

			// 总感觉这里的逻辑有问题  等回复吧 基本完成了
			function submit() {
				//全年应享受天数 验证
				if($("#txtFurlough").val() == ''){
					$.toast("请填写全年应享受天数", "cancel");
					return;
				}
				var furlough = Number($("#txtFurlough").val());
				if (furlough < 0) {
					$.toast("全年应享受天数不能小于0", "cancel");
					return;
				}
				
				if($("#txtVacation").val() == ''){
					$.toast("请填写全年应享受天数", "cancel");
				}
				//当年已休天数 验证
				var Vacation = Number($("#txtVacation").val());
				if (Vacation < 0) {
					$.toast("当年已休天数不能小于0", "cancel");
					return;
				}

				var alday = daysBetween();
				var surplus = (alday / 365) * furlough - Vacation;
				$("#txtSurplus").val(parseInt(surplus));
			}
			//获取当前年已过天数
			function daysBetween() {
				var date = new Date();
				var time = Date.parse(date.getFullYear() + "-01-01");
				if ($('#txtHiredate').val() != '' && Date.parse($('#txtHiredate').val()) > Date.parse(date.getFullYear() + "-01-01")) {
					time = Date.parse($('#txtHiredate').val());
				}
				var cha = ((date.getTime() - time) / 86400000);
				return Math.abs(cha);
			}


			// 显示规则的
			function openTip(title, msg) {
				$.alert("<p>" + msg + "</p>", title);
			}
		</script>
	</body>

</html>
